<template>
  <div class="">
    <div class="body">
      <!-- 输入原密码 -->
      <el-dialog title="要先验证原密码才能修改密码哦" :visible="true" v-if="Visible">
        <el-form :model="user" :rules="rules">
          <el-form-item label="账号：" :label-width="Width">
            <el-input v-model="user.userAccount" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="原密码：" :label-width="Width" prop="userPass">
            <el-input v-model="user.userPass" autocomplete="off" placeholder="请先输入原密码哦" show-password></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="VerifyPass(user.userPass)">确 定</el-button>
        </div>
      </el-dialog>
      <div class="body-update">
        <h4 style="text-align:center;">修改密码</h4>
        <el-form :model="registerForm" status-icon :rules="rules" ref="registerForm"  class="login-form">
          <el-form-item  prop="email">
            <el-input placeholder="邮箱" v-model="registerForm.email" clearable disabled></el-input>
          </el-form-item>
          <el-form-item  prop="pass">
            <el-input placeholder="设置新密码" v-model="registerForm.pass" show-password></el-input>
          </el-form-item>
          <el-form-item  prop="checkPass">
            <el-input placeholder="确认密码" v-model="registerForm.checkPass" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('registerForm')">提交</el-button>
            <el-button @click="resetForm('registerForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    inject:['reload'],//注入App里的reload方法
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.registerForm.checkPass !== '') {
            this.$refs.registerForm.validateField('checkPass');
          }
          callback();
        }
      };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.registerForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      registerForm: {
        email: "",
        pass:"",
        checkPass:"",
      },
      user:{
        userAccount:"",
        userPass:"",
      },
      Visible:true,
      Width:"80px",
      rules:{
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' },
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' },
        ],
        userPass:[
          { required: true, message: '原密码不能为空', trigger: 'blur' }
        ]
      },

    }
  },
  mounted(){
    this.getAccount();
    // this.$store.commit("updateVerify",true);
    this.Visible = this.$store.getters.getVerify;
    // console.log(this.Visible);
  },
  methods: {
    // 点击取消按钮，就会跳转到个人中心初始页面
    cancel(){
      this.Visible = false;
      let id = this.$store.getters.getUser.user_id
      this.$router.push({path:"/personalTabbar",query:{id}});
      // location.reload();
    },
    VerifyPass(pass){
      let originalPass = this.$store.getters.getUser.password;
      if(originalPass==pass){
        this.$message({
          message: '密码验证成功',
          type: 'success'
        });
        this.Visible = false;
        this.$store.commit("updateVerify",false);
        console.log(this.$store.getters.getVerify);
        // this.reload();
        // location.reload();
      }else{
        this.$store.commit("updateVerify",true);
        if(pass==""){
          this.$message('密码不能为空哦');
        }else{
          this.$message('密码不正确哦');
        }
        this.user.userPass = ""
      }

    },
    async getAccount(){
      let account = this.$store.getters.getUser.account
      // console.log(account);
      this.registerForm.email = account;
      this.user.userAccount = account;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.updateUser();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    async updateUser(){
      let oldUser = this.registerForm;
      console.log(oldUser);
      const {data:res} = await this.$http.post("changeMes",{oldUser});
      if(res.status != 200){
        this.$message({
          message: '修改数据失败',
          type: 'warning'
        });
      }else{
        this.$message({
          message: '修改成功，请重新登录',
          type: 'success'
        });
        this.$router.push("/login")
      }

    },
    resetForm(formName) {
      this.registerForm.pass = this.registerForm.checkPass = "";
    },

  }
}
</script>
<style scoped>
.rss {
  padding: 200px 0;
}
@import url('./css/person.css');
</style>
